<template>
  <div class="index">
    <div class='index-banner'>
      <swiper :options="swiperOption" ref="bannerSwiper" @someSwiperEvent="callback">
        <!-- slides -->
        <swiper-slide v-for="(item,key) in banner " :key="key" ><img :src="item.imgurl" alt=""></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
      </swiper>
    </div>
    <el-row class="index-row bg-grey">
      <el-col :span="24">
        <div class="index-row-content">
            <h2 class="index-row-content-title">最近更新</h2>
            <div class="index-row-content-list">
              <swiper :options="swiperOption1" ref="newGameSwiper" @someSwiperEvent="callback">
                <!-- slides -->
                <swiper-slide v-for="(item,key) in ng " :key="key" @mouseenter.native="slideShadow('enter','new'+key)" @mouseleave.native="slideShadow('leave')">
                  <img :src="item.imgurl" alt=""  @click='goDetailPage(item.gameId)'>
                  <transition name="slide-y">
                    <div class="index-row-content-list-mask flex-c-center" v-show="showMask('new'+key)" @click='goDetailPage(item.gameId)'>
                      <div class="index-row-content-list-title">游戏名称</div>
                      <div class="index-row-content-list-introduce">游戏游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍介绍</div>
                    </div>
                  </transition>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
              </swiper>
            </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="index-row">
      <el-col :span="24">
        <div class="index-row-content" >
            <div class="index-row-content-titlebox flex-r-center">
              <h2 class="index-row-content-title page" @click="goListPage('3ds')">3DS</h2>
              <a class="index-row-content-more" @click="goListPage('3ds')">查看更多</a>
            </div>
            <div class="index-row-content-list">
              <swiper :options="swiperOption2" ref="newGameSwiper" @someSwiperEvent="callback">
                <!-- slides -->
                <swiper-slide v-for="(item,key) in ng " :key="key"  ><img :src="item.imgurl" alt=""></swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
              </swiper>
            </div>
        </div>
      </el-col>
    </el-row>
    <detail-dialog :id="currentId" v-model="detailPopup" @click.native="toggleDetailPopup('close')"></detail-dialog>
  </div>
</template>
<script>
import detailDialog from '~/components/detailDialog'
export default {
  layout: 'default',
  head: {
    title: '首页'
  },
  components: {
    detailDialog
  },
  data () {
    return {
      currentId: '',
      detailPopup: false,
      currentMask: '',
      swiperOption: {
        setWrapperSize: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOption1: {
        autoplay: {
          delay: 10000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // loop: true,
        slidesPerView: 4, // 一行显示3个
        slidesPerColumn: 1, // 显示2行
        spaceBetween: 30, // 间距
        slidesPerGroup: 4, // 多少个为1组
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      swiperOption2: {
        autoplay: {
          delay: 10000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // loop: true,
        slidesPerView: 4, // 一行显示3个
        slidesPerColumn: 2, // 显示2行
        spaceBetween: 30, // 间距
        slidesPerGroup: 8, // 多少个为1组
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      banner: [
        {
          gameId: 1,
          imgurl: require('~/static/image/banner1.jpg')
        },
        {
          gameId: 2,
          imgurl: require('~/static/image/banner2.jpg')
        },
        {
          gameId: 3,
          imgurl: require('~/static/image/banner3.jpg')
        }
      ],
      ng: [
        {
          gameId: 1,
          imgurl: require('~/static/image/ng1.jpg')
        },
        {
          gameId: 2,
          imgurl: require('~/static/image/ng2.jpg')
        },
        {
          gameId: 3,
          imgurl: require('~/static/image/ng3.jpg')
        },
        {
          gameId: 4,
          imgurl: require('~/static/image/ng4.jpg')
        },
        {
          gameId: 5,
          imgurl: require('~/static/image/ng5.jpg')
        },
        {
          gameId: 6,
          imgurl: require('~/static/image/ng6.jpg')
        },
        {
          gameId: 7,
          imgurl: require('~/static/image/ng7.jpg')
        },
        {
          gameId: 8,
          imgurl: require('~/static/image/ng8.jpg')
        },
        {
          gameId: 1,
          imgurl: require('~/static/image/ng1.jpg')
        },
        {
          gameId: 2,
          imgurl: require('~/static/image/ng2.jpg')
        },
        {
          gameId: 3,
          imgurl: require('~/static/image/ng3.jpg')
        },
        {
          gameId: 4,
          imgurl: require('~/static/image/ng4.jpg')
        },
        {
          gameId: 5,
          imgurl: require('~/static/image/ng5.jpg')
        },
        {
          gameId: 6,
          imgurl: require('~/static/image/ng6.jpg')
        },
        {
          gameId: 7,
          imgurl: require('~/static/image/ng7.jpg')
        },
        {
          gameId: 8,
          imgurl: require('~/static/image/ng8.jpg')
        }
      ]
    }
  },
  watch: {

  },
  methods: {
    callback () {},
    showMask (type) {
      if (this.currentMask === type) return true
    },
    slideShadow (type, ele) {
      if (type === 'enter') {
        this.currentMask = ele
      } else {
        this.currentMask = ''
      }
    },
    goDetailPage (id) {
      this.currentId = id
    },
    toggleDetailPopup (type) {
      if (type === 'close') {
        this.currentId = ''
      }
    },
    goListPage (type) {
      this.$router.push(`list/${type}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.index {
  img {
      width: 100%;
    }
  &-banner {

    width: 100%;
    height: auto;
    .swiper-button-next{
      height: 61px;
      width: 38px;
      opacity: 0.7;
      background:url(~/static/image/themes.gif) no-repeat right top;
    }
    .swiper-button-prev{
      height: 61px;
      width: 38px;
      opacity: 0.7;
      background:url(~/static/image/themes.gif) no-repeat left top;
    }
  }
  &-row {
    min-height: 300px;

    padding:  50px 0 ;
    &-content {
      max-width: 1200px;
      margin:0 auto;
      &-titlebox {
         margin-bottom: 40px;
      }
      &-more {
        margin-left:auto;
        font-size:16px;
        padding: 10px 20px;
        color:#333;
        border:2px solid #333;
        &:hover {
          cursor: pointer;
          border-color:#e91e63;
          background: #e91e63;
          color: #fff;
        }
      }
      &-title {
        margin-left:auto;
        font-size: 40px;
        color: #e91e63;
        margin-bottom: 40px;
        text-align:center;
        letter-spacing: 1px;
        &.page {
          cursor: pointer;
          margin-bottom: 0;
        }
      }
      &-list {
        img {
          &:hover {
            cursor: pointer;
          }
        }
        &-mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.6);
          top:0;
          cursor: pointer;
          transition: all 3s;
          color:#fff;
          padding: 20px;
        }
        &-title {
          font-size :30px;
          padding: 10px;
        }
        &-introduce {
          font-size:14px;
          line-height: 1.25em;
        }
      }
    }
  }

}
</style>
<style>

</style>

